<!-- 我的 - 推荐有礼 -->
<template>
  <view>
    <z-navbar class="z-navbar" bgColor="transparent" />
    <image class="fixed top-0 w-full" src="/package_user/static/images/bg_invite_navbar.jpg"
      :style="{ height: `${state.navbarHeight}px` }" />
    <image class="w-full" src="/package_user/static/images/bg_invite_page.jpg" mode="widthFix" />
    <view class="relative">
      <view class="flex items-center px-4">
        <button class="btn-primary flex-1 u-reset-button" open-type="share">立即邀请</button>
      </view>
      <view class="btn-poster relative z-99 mx-4 mt-3" @click="shareFriend">
        <image class="w-26 h-26 mr-2" src="/package_user/static/images/ic_poster.png" />
        <view class="c-#F8DC61 text-28">生成专属邀请卡</view>
      </view>
      <view v-if="state.data?.list.length > 0" class="relative mt-7 mx-4 h-555">
        <image class="absolute top-0 w-full h-full" src="/package_user/static/images/bg_invite_list.png" />
        <view class="relative">
          <view class="pt-0.75 text-28 c-#FF513A text-center">我邀请的好友</view>
          <view class="flex items-center py-3 text-28 text-center c-#999 u-border-bottom">
            <view class="flex-1">邀请的好友</view>
            <view class="flex-1">好友身份</view>
            <view class="flex-1">获得奖励</view>
          </view>
          <scroll-view scroll-y style="height: 400rpx">
            <view v-for="(item, index) in state.data?.list" :key="index"
              class="flex items-center mt-1 text-28 text-center c-#666">
              <view class="flex-1">{{ item.user?.nickname }}</view>
              <view class="flex-1">{{ vipLevelList[item.user?.vip_level] }}</view>
              <view class="flex-1">
                <text v-if="item.settlement_status == 1" class="c-primary">已发放</text>
                <text v-else>未发放</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view v-if="state.data?.list.length > 0" class="flex items-center px-4 mt-4 text-white">
        <view class="flex-1 text-center">
          <text class="text-28">已邀请好友：</text>
          <text class="text-40">{{ state.data?.info?.number || 0 }}人</text>
        </view>
        <view class="flex-1 text-center">
          <text class="text-28">已获得奖励：</text>
          <text class="text-40">{{ Number(state.data?.info?.money || 0).toFixed(2) }}元</text>
        </view>
      </view>
      <image class="w-full mt--8" src="/package_user/static/images/bg_invite_bottom.png" mode="widthFix" />
    </view>
    <!-- 画板 -->
    <l-painter ref="painter" css="width: 690rpx; max-height: 890rpx;" custom-style="position: fixed; left: 200%">
      <l-painter-view css="height: 100%; padding: 40rpx 32rpx 48rpx; background: #F4AF22; radius: 12rpx;">
        <l-painter-view css="display: flex; align-items:center;">
          <l-painter-view css="display: flex; flex-direction: column; justify-content: center;">
            <l-painter-view css="display: flex;">
              <l-painter-text text="您的好友"
                css="font-size: 32rpx; color: #fff; margin-bottom: 8rpx; margin-right: 14rpx; line-clamp: 1;" />
              <l-painter-text :text="userInfo.nickname"
                css="font-size: 32rpx; color: #fff; margin-bottom: 8rpx; line-clamp: 1;" />
            </l-painter-view>
            <l-painter-text text="邀请您一起加入【Hi Quick】" css="font-size: 40rpx; color: #fff;" />
          </l-painter-view>
        </l-painter-view>
        <l-painter-image css="width: 100%; height: 446rpx; margin-top: 30rpx;"
          src="/package_user/static/images/img_invite_poster.png"></l-painter-image>
        <l-painter-view css="margin-top: 32rpx; radius: 12rpx; background: #ffffff; padding: 32rpx;">
          <l-painter-view css=" display: flex; justify-content: space-between; align-items: center;">
            <l-painter-view css="flex: 1; maxLines: 1; display: flex; flex-direction: column;">
              <l-painter-image css="width: 250rpx; height: 56rpx"
                src="/package_user/static/images/img_invite_logo.png"></l-painter-image>
              <l-painter-text text="赶紧扫码加入吧~" css="font-size: 24rpx; color: #666; maxLines: 1; margin-top: 6rpx" />
            </l-painter-view>
            <l-painter-image css="width: 120rpx; height: 120rpx" :src="state.qrcode"></l-painter-image>
          </l-painter-view>
        </l-painter-view>
      </l-painter-view>
    </l-painter>
  </view>
</template>
<script setup>
import { getInviteInfo } from '@/common/http/module/user'
import { useUserStore } from '@/store/user'
import { getQrcode } from '@/common/http/module/common'

const userStore = useUserStore()
const painter = ref()
const state = reactive({
  qrcode: '',
  showSharePoup: false, // 分享poup
  navbarHeight: 0,
  data: ''
})

const vipLevelList = {
  0: '非会员',
  1: 'VIP',
  2: '黄金会员',
  3: '铂金会员',
  4: '钻石会员',
}

const userInfo = computed(() => userStore.userInfo)

function calculateNavBarHeight () {
  const sysInfo = uni.getSystemInfoSync()
  state.navbarHeight = sysInfo.statusBarHeight + 48
}

// 分享微信好友
function shareFriend () {
  nextTick(() => {
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      console.log('canvasToTempFilePath', res.tempFilePath)
      wx.showShareImageMenu({
        path: res.tempFilePath,
        success: () => { },
      })
    })
  })
}

function loadData () {
  getInviteInfo().then(res => {
    state.data = res.data
  })
  loadQrcode()
}

function loadQrcode() {
  const params = {
    path: 'pages/index/index',
    scene: `invite_${userStore.userInfo?.id}`,
    type: 0, // 不同地方保证唯一性 0-暂定推荐有礼分享
    item_id: -1 // 用不到传-1
  }
  getQrcode(params).then(res => {
    state.qrcode = res.data?.qrcode
  })
}

function getShareContent () {
  return {
    title: '加入八零学社，学习专业的外贸知识',
    imageUrl: '/static/images/common/img_share.jpg',
    path: `/pages/index/index?parentId=${userStore.userInfo?.id}`
  }
}

onLoad(() => {
  calculateNavBarHeight()
  loadData()
})

onShareAppMessage(() => getShareContent())
onShareTimeline(() => getShareContent())
</script>

<style>
page {
  background-color: #FE6B28;
}
</style>
<style lang="scss" scoped>
.btn-primary {
  box-shadow: 2rpx 6rpx 12rpx 0 rgba(254, 107, 40, 0.54);
}

.btn-poster {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 68rpx;
  border-radius: 5px;
  background-color: #FE6B28;
  border: 1px solid #F8DC61;
  box-shadow: 0px 0px 34px 0px rgba(248, 220, 97, 0.3);
}
</style>
